<template>
  <el-card v-loading="loading">
    <el-row :gutter="0">
      <el-col :sm="24">
        <div :id="id" :class="className" :style="{height:height,width:width}"/>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
// ECharts
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口
import * as echarts from 'echarts/core'
// 引入图表，图表后缀都为 Chart
import {BarChart} from 'echarts/charts'
// 引入组件，组件后缀都为 Component
import {TitleComponent, TooltipComponent, GridComponent} from 'echarts/components'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {CanvasRenderer} from 'echarts/renderers'
// 注册必须的组件
echarts.use([BarChart, TitleComponent, TooltipComponent, GridComponent, CanvasRenderer])

import resize from '@/components/Charts/mixins/resize'
import {cms as apiCms} from '@/api/admin'

export default {
  name: 'IndexCms',
  components: {},
  mixins: [resize],
  props: {
    id: {
      type: String,
      default: 'echartCms'
    },
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '500px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    // chartData: {
    //   type: Object,
    //   required: true
    // }
  },
  data() {
    return {
      loading: false,
      chart: null
    }
  },
  created() {
    //this.initChart()
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.loading = true
      apiCms().then(res => {
        this.chart = echarts.init(document.getElementById(this.id), 'macarons')
        this.setOptions(res.data)
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    setOptions(chartData) {
      var option = {
        title: {
          text: '内容',
          subtext: '分类：' + chartData.category + '，内容：' + chartData.article,
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: chartData.days
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: chartData.counts,
            type: 'bar',
            label: {
              show: true,
              position: 'top'
            }
          }
        ]
      }
      this.chart.setOption(option)
    }
  }
}
</script>
